<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue@3"></script>
    <title>第四次作业一</title>
</head>
<body>


<div id="app">
    过滤器1：<input v-model="commodity"><br>

    <p>{{ filterA(commodity)}}</p>

    过滤器2：<input v-model="count"><br>
    <p>{{ filterB(count)}}</p>


</div>

<script>
    const {createApp} = Vue

    createApp({
        data() {
            return {
                shopping_trolley: [
                    {commodity: "牙刷", count: 5, price: 10},
                    {commodity: "牙膏", count: 2, price: 20},
                    {commodity: "镜子", count: 3, price: 30},
                ],
                commodity: "的 的",
                count: 0,
                price: 0,
            }

        },
        methods: {
            clickBut: function () {
                const temp = {commodity: this.commodity, count: this.count, price: this.price}
                this.shopping_trolley.push(temp)
                console.log(this.shopping_trolley)
            },
            filterA: function (ref) {
                return ref.replaceAll(" ", "")
            },
            filterB: function (value) {
                if (!value) return '0.00';
                const intPart = Number(value) | 0; //获取整数部分
                const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分每三位加一个逗号
                let floatPart = ".00"; //预定义小数部分
                if (typeof value !== 'string') {
                    value = value.toString();
                }
                var value2Array = value.split(".");

                //=2表示数据有小数位
                if (value2Array.length === 2) {
                    floatPart = value2Array[1].toString(); //拿到小数部分
                    if (floatPart.length > 2) { //若小数位数在两位以上，则四舍五入保留两位小数
                        return parseFloat(value).toFixed(2);
                    } else if (floatPart.length === 1) { //若小数位数只有一位，补0
                        return intPartFormat + "." + floatPart + '0';
                    } else {
                        return intPartFormat + "." + floatPart;
                    }

                } else {  //数据为整数
                    return intPartFormat + floatPart;
                }

            }

        }
    }).mount('#app')
</script>
</body>
</html>